import React, { PureComponent } from 'react'
export default class LazyLd extends PureComponent {
  constructor() {
    super();
    this.state = {
      done: false,
      src: ''
    }
  }
  componentWillUnmount () {
    // 卸载异步操作设置状态
    this.setState = () => {
      return;
    }
  }
  componentDidMount () {
    // 创建一个虚拟图片
    const img = new Image();
    // 发出请求，请求图片
    img.src = this.props.src;
    // 当图片加载完毕
    img.onload = () => {
      this.setState({
        done: true
      });
    }
  }

  render () {
    return (
      <div>
        {
          this.state.done
            ?
            <img src={this.props.src} alt='封面' />
            :
            <img src="" alt='占位符' />
        }
      </div>
    )
  }
}